export const baseUsage = `
import {
    PhForm,
    PhFormDatetime,
    PhFormDatetimeRange,
    PhFormDatetimeCascade,
} from 'ph-form'

interface FormDatetime{
    placeholder:{type:String},
    disabled:{type:Boolean,default:false},
    // value:{type:String}, 废除
    // v-model = "xxx"代替
    min:{type:String},
    max:{type:String},
    type:{type:String,default:"datetime"},
    format:{type:String,default:"yyyy-MM-dd hh:mm:ss"},
    @change 改变事件
}
//特殊
interface PhFormDatetimeCascade,
interface PhFormDatetiemRange{
    disabled:{type:Boolean,default:false},
    type:{type:String,default:"date"},
    format:{type:String},
    placeholderStart:{type:String},
    placeholderEnd:{type:String},
    // value:{type:String}, 废除
    // v-model = "xxx"代替 xxx:[string,string]=[start,end] 
    min:{type:String,default:""}, //下限值
    max:{type:String,default:""}, //上限值
    @change 改变事件
}
//如需脱离form单独使用，如下
import {
    PhDatetimeCascade,
    PhDatetime,
} from 'ph-form'
interface Datetime{
    ...同上
    不支持验证器
}

`;

export const demo1 = `
<ph-divider>表单datetime {{datetime}}</ph-divider>
<ph-datetime style="width:150px" :value="datetime" @change="onDatetimeChange"/>
<ph-divider>表单date {{date}}</ph-divider>
<ph-date style="width:150px" :value="date" @change="onDateChange"/>
<ph-divider>表单year {{year}}</ph-divider>
<ph-year style="width:150px" :value="year" @change="onYearChange"/>
<ph-divider>表单year-month {{yearmonth}}</ph-divider>
<ph-month style="width:150px" :value="yearmonth" @change="onYearMonthChange"/>
<ph-divider>表单time {{time}}</ph-divider>
<ph-time style="width:150px" :value="time" @change="onTimeChange"/>
<ph-divider>自定义表单time格式 {{time}}</ph-divider>
<ph-time style="width:150px" :value="time1" format="hh时mm分ss秒" @change="onTimeChange1"/>
<ph-divider>表单禁止 {{datetime}}</ph-divider>
<ph-datetime style="width:150px" :value="datetime" :disabled="true" @change="onDatetimeChange"/>
`;

export const demo2 = `
<ph-form>
    <ph-divider>表单datetime {{datetime}}</ph-divider>
    <ph-form-datetime style="width:150px" v-model="datetime" />
    <ph-blockquote type="primary">
        表单datetime 限定范围
        <br/>
        start="1991-09-20 12:03:34" end="1993-09-20 12:03:34"
    </ph-blockquote>
    <ph-form-datetime style="width:150px" start="1991-09-20 12:03:34" end="1993-09-20 12:03:34" v-model="datetime" />
    
    <ph-divider>表单date {{date}}</ph-divider>
    <ph-form-date style="width:150px" v-model="date" />
    <ph-blockquote type="primary">
        date 限定范围
        <br/>
        start="1993-09-5" end="1993-09-23"
    </ph-blockquote>
    <ph-form-date style="width:150px" value="1993-09-10" start="1993-09-8" end="1993-09-23" />
    
    <ph-divider>表单year {{year}}</ph-divider>
    <ph-form-year style="width:150px" v-model="year" />
    <ph-blockquote type="primary">
        year 限定范围
        <br/>
        start="1991" end="1993"
    </ph-blockquote>
    <ph-form-year style="width:150px" v-model="year" start="1991" end="1993" />

    <ph-divider>表单year-month {{yearmonth}}</ph-divider>
    <ph-form-month style="width:150px" v-model="yearmonth" />
    <ph-blockquote type="primary">
        month 限定范围
        <br/>
        start="1991-06" end="1993-09"
    </ph-blockquote>
    <ph-form-month style="width:150px" v-model="yearmonth" start="1991-06" end="1993-09" />


    <ph-divider>表单time {{time}}</ph-divider>
    <ph-form-time style="width:150px" v-model="time" />
    <ph-blockquote type="primary">
        time 限定范围
        <br/>
        start="6:30:34" end="18:00:34"
    </ph-blockquote>
    <ph-form-time style="width:150px" v-model="time" start="6:30:34" end="18:00:34" />

    <ph-divider>自定义表单time格式 {{time}}</ph-divider>
    <ph-form-time style="width:150px" v-model="time1" format="hh时mm分ss秒" />
    <ph-blockquote type="primary">
        time 限定范围
        <br/>
        start="6时30分34秒" end="18时00分34秒"
    </ph-blockquote>
    <ph-form-time style="width:150px" v-model="time1" start="6时30分34秒" end="18时00分34秒" format="hh时mm分ss秒" />

    <ph-divider>并列日期范围start="6:30:34" end="18:00:34" value:{{time}}</ph-divider>
    <ph-form-datetiem-range :start="time" min="6:30:34" max="18:00:34" type="time"/>

    <ph-divider>表单禁止 {{datetime}}</ph-divider>
    <ph-form-datetime style="width:150px" v-model="datetime" :disabled="true" />
    
    <ph-divider>weekText 自定义周文字 :weekText="['Su','Mo','Tu','We','Th','Fr','Sa']"</ph-divider>
    <ph-form-date label="weekText" 
        style="width:350px"
        :weekText="['Su','Mo','Tu','We','Th','Fr','Sa']"/>
    <ph-divider>importants自定义重要日子 :importants="[{title:'工资',md:'*-20'},{title:'浪',md:'*-9',desc:'去三里屯浪'}]"</ph-divider>
    <ph-form-date label="importants"
        style="width:350px"
        :importants="[{title:'工资',md:'*-20'},{title:'浪',md:'*-9',desc:'去三里屯浪'}]"/>
    <ph-divider>clear 关闭清除按钮</ph-divider>
    <ph-form-date label="clear" style="width:350px" :clear="false" v-model="datetime" />
    <ph-divider>now 关闭现在按钮选项</ph-divider>
    <ph-form-date label="now" style="width:350px" :now="false" v-model="datetime" />

    <ph-blockquote>表单主题色:theme&lt;dark|light|primary|success|danger|warning&gt;></ph-blockquote>
    <ph-form-date label="默认dark" style="width:350px" v-model="datetime" />
    <ph-form-date label="light" theme="light" style="width:350px" v-model="datetime" />
    <ph-form-date label="primary" theme="primary" style="width:350px" v-model="datetime" />
    <ph-form-date label="success" theme="success" style="width:350px" v-model="datetime" />
    <ph-form-date label="danger" theme="danger" style="width:350px" v-model="datetime" />
    <ph-form-date label="warning" theme="warning" style="width:350px" v-model="datetime" />
</ph-form>`;
